<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>应用管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-button type="primary" icon="el-icon-plus" plain @click="showCreateDialog">新建</el-button>
            </el-col>
            <el-col :span="18">
                <el-input placeholder="请输入内容"  class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="appname" label="名称"></el-table-column>
            <el-table-column prop="appcode" label="代码"></el-table-column>
            <el-table-column prop="creater" label="创建人"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" :page-sizes="[5, 15, 30, 60, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <app-create-dialog :show.sync="dialogShow" :form.sync="createForm" @onConfirm="onCreateConfirm" @onCancel="onCreateCancel">
            <template slot-scope="slotProps">
                <el-form-item label="测试" label-width="120px">
                    <el-input placeholder="请输入测试名称" :value="slotProps.data.name"></el-input>
                </el-form-item>
            </template>
        </app-create-dialog>
    </div>
</template>

<style>
    .el-row {
        margin-bottom: 10px;
    }
</style>

<script>

  import appCreate from '@/components/appcreate.vue'

  export default {
    mounted: function() {
        this.loadAll();
    },
    components: {
        'app-create-dialog': appCreate
    },
    methods: {
        showCreateDialog() {
            this.dialogShow = true;
        },
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadData();
        },
        loadAll() {
            this.axios.get('/api/app/count').then((response)=>{
                this.total = response.data.data;
                this.axios.get('/api/app/apps/' + this.currentPage + '/' + this.pageSize).then((response)=>{
                    console.log(response.data.data);
                    this.tableData = response.data.data;
                }).catch((response)=>{
                    console.log(response);
                });
            }).catch((response)=>{
                console.log(response);
            });
        },
        loadData() {
            this.axios.get('/api/app/apps/' + this.currentPage + '/' + this.pageSize).then((response)=>{
                console.log(response.data.data);
                this.tableData = response.data.data;
            }).catch((response)=>{
                console.log(response);
            });
        },
        onCreateConfirm() {
            console.log(this.createForm.name);
            this.dialogShow = false;
        },
        onCreateCancel() {
            console.log(this.createForm.name);
            this.createForm.name = '';
            this.createForm.code = '';
            this.dialogShow = false;
        }
    },
    data() {
      return {
        total: 0,
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        dialogShow: false,
        createForm: {
            name: '11111',
            code: ''
        }
      }
    }
  }
</script>

